Skip to content

feat(item-sliding): added specific animations for ionic#31103

Open
os-davidlourenco wants to merge 10 commits intonextfrom
ROU-12715
Open

feat(item-sliding): added specific animations for ionic#31103
os-davidlourenco wants to merge 10 commits intonextfrom
ROU-12715

Conversation

@os-davidlourenco
Copy link
Copy Markdown
Contributor

@os-davidlourenco os-davidlourenco commented Apr 29, 2026

Issue number: resolves internal


What is the current behavior?

The item-slidinghas the same animations for md, iOS and Ionic

What is the new behavior?

New animations were added for the Ionic theme, including:

  • Animation for opening the item-sliding
  • Animation for closing the item-sliding
  • Animation for expandable options

New conditions were also included to ensure a smoother experience:

  • Closing item-sliding by exceeding velocity
  • Selecting an extendable option by exceeding the velocity when options are visible
  • Rubber effect when selecting the option

Does this introduce a breaking change?

  • Yes
  • No

Other information

@os-davidlourenco os-davidlourenco requested a review from a team as a code owner April 29, 2026 16:43
@os-davidlourenco os-davidlourenco added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 29, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 8, 2026 8:48am

Request Review

@github-actions github-actions Bot removed package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 29, 2026
Comment thread core/src/components/item-sliding/item-sliding.ionic.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.ionic.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.common.scss Outdated
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update the branch to be up to sync with next. We had to make changes to the item sliding tests that were causing tests that were failing while you were out. I would recommend reviewing the fix in case your tests need to be updated.

Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a comment on the ticket!

Comment thread core/src/components/item-sliding/item-sliding.tsx Outdated
Comment thread core/src/components/item-sliding/item-sliding.common.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.native.scss
Comment thread core/src/components/item-sliding/item-sliding.md.scss
Comment thread core/src/components/item-sliding/item-sliding.tsx Outdated
Comment thread core/src/components/item-sliding/item-sliding.tsx
Comment thread core/src/components/item-sliding/item-sliding.tsx Outdated
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only reviewed the test. I'll leave the rest to the current reviewers.

Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issues I found were addressed. Great work! 💪 I did leave a comment on the Jira ticket with my concerns on the pull threshold.

Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dragElementBy does support velocity control - its steps param (8th arg) is purpose-built for it: lower steps = higher velocity. We already use the inverse in this branch with DRAG_STEPS_UNDER_FULL_SWIPE = 15 to stay below the threshold; passing steps: 2 triggers full swipe.

The util also handles a WebKit quirk (drag-element.ts:163-171) where Safari needs RAF waits for velocity to accumulate. Raw page.mouse.* skips that — your version produced flaky results when re-run, while the dragElementBy refactor was stable across --repeat-each.

I highly encourage getting familiar with dragElementBy as that is the util that should be used when possible for our gesture tests.

I provided the code snippets to use dragElementBy instead while still having your intended results.

Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants